<template>
  <div class="container" style="margin-bottom:50px">
    <p class="title">
      订单详情
      <el-button
        type="primary"
        class="btn"
        @click="$router.back()"
      >返回</el-button>
    </p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="基础信息">
        <label for="">订单编号: </label> <span>{{ info.orderNo }}</span><br>
        <div style="display: flex;">
          <label for="">商品编号: </label>
          <div>
            <span v-for="item in info.vinOrderList" :key="item.toolType">
              <!-- "toolType": 2, //工具类型： 0-VIN车型识别,1-维保记录,2-理赔记录,3-车辆检测,4-延保服务,5-诊断记录,6-调表查询 -->
              {{
                item.toolType == 0
                  ? "VIN车型识别:"
                  : item.toolType == 1
                    ? "维保记录:"
                    : item.toolType == 2
                      ? "理赔记录:"
                      : item.toolType == 3
                        ? "车辆检测:"
                        : item.toolType == 4
                          ? "延保服务:"
                          : item.toolType == 5
                            ? "诊断记录:"
                            : item.toolType == 6
                              ? "调表查询:"
                              : ""
              }}
              {{ item.orderNo }}
              <br> </span><br>
          </div>
        </div>

        <label for="">第三方订单编号: </label><span>{{ info.thirdTradeNo }}</span><br>
        <label for="">创建时间: </label><span v-if="info.createTime">{{ info.createTime }}</span><br>
        <label for="">类型: </label><span>{{
          [
            "",
            "发布服务",
            "担保金（保证购车）",
            "车辆检测订单",
            " 平台服务费(简易购车)"
          ][info.orderType]
        }}</span><br>
        <label for="">订单金额: </label><span>{{
          info.orderType == 1
            ? Number(info.orderMoney).toFixed(2)
            : Number(info.payAmount).toFixed(2)
        }}
          元</span><br>
        <label for="">订单状态: </label><span>{{
          ["未支付", "已支付", "支付失败", "已退款", "退款失败", "部分退款"][
            info.payStatus
          ]
        }}</span><br>
      </el-form-item>
      <el-form-item label="商品信息">
        <label for="">商品名称: </label>
        <span v-if="info.orderType == 2 || info.orderType == 4">
          {{
            info.orderType == 2
              ? "担保金（保证购车）"
              : info.orderType == 4
                ? "平台服务费(简易购车)"
                : ""
          }}
        </span>
        <span v-else-if="info.orderType == 3">
          <!-- 103, //线下检测类型：101-事故排查检测,102-重要部件检测,103-全面检测 -->
          {{ info.detectionDTO.detectionType == 101?'事故排查检测':
            info.detectionDTO.detectionType == 102?'重要部件检测':
            info.detectionDTO.detectionType == 103?'全面检测':'' }}
        </span>
        <span v-else>
          <span v-for="item in info.vinOrderList" :key="item.toolType">{{
            item.toolType == 0
              ? "VIN车型识别、"
              : item.toolType == 1
                ? "维保记录、"
                : item.toolType == 2
                  ? "理赔记录、"
                  : item.toolType == 3
                    ? "车辆检测、"
                    : item.toolType == 4
                      ? "延保服务、"
                      : item.toolType == 5
                        ? "诊断记录、"
                        : item.toolType == 6
                          ? "调表查询、"
                          : ""
          }}</span>
        </span>
        <br>
        <label for="">商品金额: </label>
        <span v-if="info.orderType == 2 || info.orderType == 4">
          {{
            info.orderType == 1
              ? Number(info.orderMoney).toFixed(2)
              : Number(info.payAmount).toFixed(2)
          }}元
        </span>
        <span v-else-if="info.orderType == 3">
          {{ info.detectionDTO.detectionPrice?info.detectionDTO.detectionPrice.toFixed(2):info.detectionDTO.detectionPrice }}
          元
        </span>

        <span v-else>
          <span v-for="item in info.vinOrderList" :key="item.toolType">{{
            Number(item.amount).toFixed(2) + "元、"
          }}</span>
        </span>
        <br>
        <div v-if="info.detectionDTO">
          <label for="">交通费: </label><span>{{ Number(info.detectionDTO.travelCost).toFixed(2) }}元</span><br>
        </div>

        <!-- <label for="">支付时间: </label><span>{{ info.payTime }}</span
        ><br /> -->
      </el-form-item>
      <el-form-item label="支付信息">
        <label for="">支付方式: </label>
        <span>{{ ["支付宝", "微信"][info.payType] }}</span> <br>
        <label for="">支付金额: </label><span>{{ Number(info.payAmount).toFixed(2) }}元</span><br>
        <!-- <label for="">支付订单号: </label><span>{{ info.thirdTradeNo }}</span><br> -->
        <label for="">支付时间: </label><span>{{ info.payTime }}</span><br>
      </el-form-item>
      <el-form-item v-if="info.orderType != 2" label="报告信息">
        <div style="display:flex">
          <label for="">报告详情/状态: </label>
          <div>
            <span
              v-for="item in info.vinOrderList"
              :key="item.toolType"
              :style="item.status == 2 ? 'color: #00f; cursor: pointer' : ''"
              @click="goto(item)"
            >
              {{ ["查无报告", "查询中", "查看报告"][item.status] }}(

              {{
                [
                  "VIN车型识别",
                  "维保记录",
                  "理赔记录",
                  "车辆检测",
                  "延保服务",
                  "诊断记录",
                  "调表查询"
                ][item.toolType]
              }}
              )
              <br>
            </span>
          </div>
        </div>

        <!-- <br /> -->

        <!-- <label for="">报告详情: </label
        ><span
          style="color: #00f; cursor: pointer"
          @click="dialogVisible = true"
          >查看报告</span
        ><br /> -->
        <!-- <label for="">报告生成时间: </label
        ><span>{{ info.reportCreateTime }}</span
        ><br /> -->
      </el-form-item>
      <el-form-item label="车辆信息">
        <label for="">车辆ID: </label> <span>{{ info.carInfoId }}</span> <br>
        <label for="">VIN: </label> <span v-if="info.vin">{{ info.vin }}</span>
        <br>
        <label for="">品牌车系: </label>
        <span>{{
          info.brandName + " " + info.seriesName + " " + info.modelName
        }}</span>
        <br>
        <label for="">流程状态: </label><span>
          {{
            ["", "未上架", "2销售中", "交易中", "已下架"][info.addedStatus]
          }} </span><br>
      </el-form-item>
      <el-form-item label="用户信息">
        <label for="">用户ID: </label> <span>{{ info.userId }}</span> <br>
        <label for="">手机号: </label><span>{{ info.mobile }}</span><br>
      </el-form-item>

      <el-form-item v-if="info.orderType == 3" label="检测信息">
        <label for="">检测时间: </label><span v-if="info.detectionDTO">{{
          info.detectionDTO.detectionDate
        }}</span><br>
        <label for="">检测地址: </label>
        <span v-if="info.detectionDTO">
          {{
            info.detectionDTO.provinceName +
              info.detectionDTO.cityName +
              info.detectionDTO.areaName +
              info.detectionDTO.detailAddress
          }}</span>
        <br>
      </el-form-item>

      <el-form-item v-if="info.refundTime" label="退款信息">
        <label for="">退款金额: </label><span>{{ Number(info.refundAmount).toFixed(2) }}元</span><br>
        <label for="">退款方式: </label>
        <span>{{ ["支付宝", "微信"][info.payType] }}</span> <br>
        <label for="">退款时间: </label><span>{{ info.refundTime }}</span><br>
        <label for="">退款订单号: </label><span>{{ info.orderNo }}</span><br>
      </el-form-item>
    </el-form>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <div v-if="myinfo" class="content">
        <div class="top"><span class="tips" />车辆信息</div>
        <div class="item">
          <div class="left">品牌</div>
          <div v-if="myinfo.brandModel" class="right">
            {{ myinfo.brandModel }}
          </div>
        </div>
        <div class="item">
          <div class="left">里程</div>
          <div class="right">{{ myinfo.mileage }}</div>
        </div>
        <div class="item">
          <div class="left">VIN</div>
          <div v-if="myinfo.vin" class="right">{{ myinfo.vin }}</div>
        </div>
        <div class="item">
          <div class="left">车牌号</div>
          <div v-if="myinfo.travelLicense" class="right">
            {{ myinfo.vehicleNo }}
          </div>
        </div>
        <div class="item">
          <div class="left">发动机号</div>
          <div v-if="myinfo.engineCode" class="right">
            {{ myinfo.engineCode }}
          </div>
        </div>
        <div class="item">
          <div class="left">报告生成时间</div>
          <div class="right">{{ myinfo.reportTime }}</div>
        </div>
        <div class="top"><span class="tips" />里程趋势分析</div>
        <div id="mycharts" style="width:450px;height:300px" />
        <div class="top"><span class="tips" />里程记录</div>
        <table>
          <tr>
            <th>记录时间</th>
            <th>里程数值(万公里)</th>
          </tr>
          <tr v-for="(item, i) in myinfo.mileages" :key="i">
            <td>{{ item.recordTime }}</td>
            <td>{{ item.mileage }}</td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisibleisred"
      width="500px"
    >
      <!-- <header v-if="myinfo && info.status == 1">
        <p class="title">订单已取消</p>
        <p class="desc">暂无该车型的诊断记录</p>
      </header> -->
      <div v-if="myinfo" class="content">
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
        <div class="item">
          <div class="left">支付金额</div>
          <div class="right">{{ Number(myinfo.amount).toFixed(2) }}元</div>
        </div>
        <div class="top"><span class="tips" />车辆信息</div>
        <div class="item">
          <div class="left">品牌</div>
          <div v-if="myinfo.travelLicense" class="right">
            {{ myinfo.travelLicense.brandModel }}
          </div>
        </div>
        <div class="item">
          <div class="left">VIN</div>
          <div v-if="myinfo.travelLicense" class="right">
            {{ myinfo.travelLicense.vin }}
          </div>
        </div>
        <div class="item">
          <div class="left">车牌号</div>
          <div v-if="myinfo.travelLicense" class="right">
            {{ myinfo.travelLicense.vehicleNo }}
          </div>
        </div>
        <div class="item">
          <div class="left">发动机号</div>
          <div v-if="myinfo.travelLicense" class="right">
            {{ myinfo.travelLicense.engineCode }}
          </div>
        </div>
        <div class="item">
          <div class="left">报告生成时间</div>
          <div class="right">{{ myinfo.reportTime }}</div>
        </div>
        <div class="top">
          <span class="tips" />非4S店诊断记录
          <span style="float:right">{{ myinfo.totalNumber }}</span>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item
            v-for="(item, index) in myinfo.faultCodeList"
            :key="index"
            :title="item.recordTime"
            :name="index"
          >
            <template slot="title">
              &nbsp; &nbsp; &nbsp;{{ item.recordTime }}
              <span class="myRight">{{ item.diagnosisList.length }}</span>
            </template>
            <div
              v-for="(items, i) in item.diagnosisList"
              :key="i"
              class="box-content"
            >
              <div class="items">
                <div class="left">故障码</div>
                <div class="right">{{ items.code }}</div>
              </div>
              <div class="items">
                <div class="left">故障系统</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
              <div class="items">
                <div class="left">故障描述</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- <div v-if="myinfo && info.status == 1" class="content">
        <div class="top"><span class="tips" />退款信息</div>
        <div class="item">
          <div class="left">退款方式</div>
          <div class="right">{{ ["支付宝", "微信"][info.refundWay] }}</div>
        </div>
        <div class="item">
          <div class="left">退款时间</div>
          <div class="right">{{ info.refundTime }}</div>
        </div>
        <div class="item">
          <div class="left">退款金额</div>
          <div class="right">{{ info.refundAmount }}</div>
        </div>
        <div class="item">
          <div class="left">退款订单号:</div>
          <div class="right">{{ info.refundOrderNo }}</div>
        </div>
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
      </div> -->
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisiblefrom"
      width="500px"
    >
      <iframe
        :src="url"
        style="
  width: 400px;
  height: 800px;
  overflow: scroll;
  overflow-x: hidden;
 "
      />
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisiblelipei"
      width="430px"
    >
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="yes"
        allowtransparency="yes"
        style="width:400px;height:800px"
        :src="url"
      />
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleisred: false,
      dialogVisiblefrom: false,
      dialogVisiblelipei: false,
      reportUrl: '',
      info: {},
      myinfo: {},
      activeNames: ['0'],
      url: ''
    }
  },
  created() {
    this.$get(
      `/web/vehicleOrder/getVOrderPayDetails?orderType=${
        this.$route.query.orderType
      }&orderId=${this.$route.query.orderId}`
    ).then(res => {
      if (res.data.code === '0') {
        this.info = res.data.data
        this.info.orderMoney = 0
        if (this.info.vinOrderList) {
          this.info.vinOrderList.forEach(item => {
            this.info.orderMoney += Number(item.amount)
            console.log(this.info.orderMoney)
          })
        }
        if (this.info.detectionDTO) {
          this.info.orderMoney += Number(this.info.detectionDTO.travelCost)
        }
      } else {
        this.$message.error(res.data.message)
      }
    })
  },
  methods: {
    goto(row) {
      if (row.status != 2) return
      // "toolType": 6, //工具类型： 0-VIN车型识别,1-维保记录,2-理赔记录,3-车辆检测,4-延保服务,5-诊断记录,6-调表查询
      if (row.toolType == 5) {
        // 5-诊断记录reportId
        this.$get(
          `app/carVinReport/getFaultCodeDetail?id=${row.reportId}`
        ).then(res => {
          if (res.data.code === '0') {
            this.myinfo = res.data.data
            this.dialogVisibleisred = true
            console.log(this.myinfo)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (row.toolType == 6) {
        // 6-调表查询
        this.$get(`app/dashboard/getDetails?orderNo=${this.info.orderNo}`).then(
          res => {
            console.log(res)
            if (res.data.code === '0') {
              this.myinfo = res.data.data
              this.open()
              console.log(this.myinfo)
            } else {
              this.$message.error(res.data.message)
            }
          }
        )
      } else if (row.toolType == 0) {
        this.dialogVisiblefrom = true
        this.url =
          'https://test.ecarbroker.com.cn/esch5/index.html#/vin/reportDetails?id=' +
          row.reportId
      } else if (row.toolType == 2) {
        // 1-维保记录
        this.url = row.reportUrl
        this.dialogVisiblelipei = true
      } else if (row.toolType == 3) {
        this.url = row.reportUrl
        this.dialogVisiblelipei = true
      } else if (row.toolType == 4) {
        this.url = row.reportUrl
        this.dialogVisiblelipei = true
      } else if (row.toolType == 1) {
        this.url = row.reportUrl
        this.dialogVisiblelipei = true
      }
    },
    open() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.chart = echarts.init(document.getElementById('mycharts'))
        console.log(this.chart)
        // const time = this.myinfo.mileages.map(item => item.recordTime)
        const mileage = this.myinfo.mileages.map(item => Number(item.mileage))
        const index = mileage.indexOf(Math.max(...mileage))
        console.log(index)
        // 指定图表的配置项和数据
        var option = {
          // 标题
          title: {
            text: '里程记录疑似调表'
          },
          // 工具箱
          // 保存图片
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                show: true
              }
            }
          },
          // 图例-每一条数据的名字叫销量
          legend: {
            data: ['本车里程曲线']
          },
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'none'
            }
          ],

          // x轴
          xAxis: {
            data: this.myinfo.mileages.map(item => item.recordTime)
          },
          // y轴没有显式设置，根据值自动生成y轴
          yAxis: {},
          // 数据-data是最终要显示的数据
          series: [
            {
              name: '本车里程曲线',
              type: 'line',
              data: this.myinfo.mileages.map(item => item.mileage),
              itemStyle: { normal: { label: { show: true }}}
              // markPoint: {
              //   data: [
              //     { xAxis: time[index], yAxis: mileage[index], value: '异常' }
              //   ]
              // }
            }
          ]
        }
        this.chart.setOption(option)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
table {
  width: 100%;
  // border: 1px solid #ccc;
  th,
  td {
    width: 100;
    border: 1px solid #ccc;
    text-align: center;
    height: 30px;
  }
}
.content {
  height: 800px;
  position: relative;
  width: 450px;
  overflow: hidden;
  overflow-y: auto;
  .top {
    height: 60px;
    padding: 0 12px;
    line-height: 60px;
    .tips {
      transform: translateY(5px);
      width: 5px;
      height: 26px;
      opacity: 1;
      display: inline-block;
      margin-right: 13px;
      border: 3px solid #f4b22d;
      background: #f4b22d;
      border-radius: 6px;
    }
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #323232;
  }
  .item {
    // height: 88px;
    // line-height: 44px;
    padding: 20px 31px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    .left {
      color: #919598;
    }
    .right {
      color: #323232;
    }
  }
  .items {
    padding: 10px 31px;
    // border-bottom: 1px solid #f1f1f1;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    .left {
      color: #919598;
    }
    .right {
      color: #323232;
    }
  }
  .myContent {
    .item {
      height: 44px;
      line-height: 1px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
  }

  button {
    margin-right: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    opacity: 0.6;
    background: #f1f1f1;
    margin-bottom: 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    &.activeColor {
      opacity: 1;
      background: #f4b22d;
      border-radius: 6px;
    }
  }
  .contentDefault {
    height: 392px;
    // width: 100vw;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }
  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    display: inline-block;
    text-align: center;
  }
  /deep/ .el-dialog__body {
    min-height: 100px;
    .scroll > iframe {
      @include scrollBar();
    }
  }
}
</style>
